<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=QQ">
    <title>QQ登录</title>
    <!-- 在网页的页签上加入一个小icon的图标 -->
    <link rel="shortcut icon" href="images/favicon.ico"type="images/x-icon">
    <!--引入register.css-->
    <link rel="stylesheet" href="css/register.css">
    <!--引入饿了么ui的css文件-->
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <!--div#left-->
    <div id="left"></div>
    <!--表单注册区域div容器-->
    <div id="app">
        <el-form :model="user" :rules="rules" ref="myform" label-width="100px" class="demo-ruleForm">
            <el-form-item prop="account">
                <el-input placeholder="请输入账号" v-model="user.account"></el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input placeholder="请输入密码" show-password v-model="user.password"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="login" style="width: 383px;" type="primary">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
    <!-- 引入vue/ajax/饿了么ui框架-->
    <script src="js/vue.js"></script>
    <script src="js/axios.min.js"></script>
    <script src="js/index.js"></script>
    <!--声明js脚本区域-->
    <script>
        var app = new Vue({
            el:'#app',//vue框架作用于该app节点内
            //数据区域 el，data，methods是固定写法，
            //内部的变量名和方法名可以随意取值
            data:{
                user:{
                account: null,
                password:null,
                face:'images/default_face.png'
                },
                rules:{
                    account:[
                        {required:true,message:'请输入账号信息!',trigger:'blur'},
                        {min:3,max:15,message:'账号信息不少于3个字符不大于10个字符',trigger:'blur'}
                ],
                    password:[
                        {required:true,message:'请输入密码!',trigger:'blur'},
                        {min:6,max:10,message:'密码不少于6个字符不大于10个字符',trigger:'blur'} 
                    ]
                }
            },
            //方法区域
            methods:{
                login(){
                    this.$refs['myform'].validate((valid) => {
                        if (valid) {
                            //把要注册的数据发送给java后端服务器
                            axios.post("http://121.4.12.168:8080/api/login",this.user)
                            .then(res=>{
                                if(res.data.code==200){
                                    this.$message({
                                        message:'登录成功！',
                                        type:'success',
                                        center:true,
                                        showClose:true,
                                        onClose:e=>{
                                            sessionStorage.setItem("user",this.user.account);
                                            //跳转到聊天窗口
                                            location = 'chat.html';
                                        }
                                    });
                                }else{
                                    this.$message.error({
                                        message: res.data.message
                                    });
                                }
                            });
                        }
                    });
                },
            }
        });
    </script>
</body>
</html>